<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
	<!-- Pager CSS -->
<!-- <link rel="stylesheet" href="__STATIC__/assets/vendor/jquery-pager/Pager.css"> -->
<!-- <link rel="stylesheet" href="__ROOT__/assets/addons/shopro/libs/element/element.css"> -->
<link rel="stylesheet" href="__STATIC__/assets/unpkg/element-ui@2.12.0/lib/theme-chalk/index.css">
<!-- <link rel="stylesheet" href="__ROOT__/assets/addons/shopro/libs/common.css"> -->
<style type="text/css">
	[v-cloak] {
        display: none
    }
	table label{
		font-weight: bold;
		/*padding-right: 20px;*/
	}
	table span{
		margin-right:50px;
	}
	.edit-text,
    .del-text,
    .enable-text,
    .disable-text {
        cursor: pointer;
        color: #444;
        margin-right: 14px;
    }

    .edit-text {
        color: #03c5ff;
    }
	.del-text {
        color: #FF5959;
    }
	
</style>
</head>

<body>

	<!-- MAIN -->
	<div id="organization-lists" v-cloak class="main">
		<!-- MAIN CONTENT -->
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>团队管理</li>
			    <li>团队列表</li>
			</ul>
			<div >
				<el-button type="primary" size="mini" @click="buyersDialog=true">添加团队
				</el-button>
				<el-table ref="multipleTable" :data="organizationData" tooltip-effect="dark" style="width: 100%" border
					>
					<!-- <el-table-column type="selection" min-width="36"> -->
					</el-table-column>
					<el-table-column label="ID" prop="id" min-width="70">
						<template slot="header" slot-scope="scope">
							<div class="display-flex">
								<div>ID</div>
							</div>
						</template>
					</el-table-column>

					<el-table-column label="团队" min-width="148">
						<template slot-scope="scope">
							<div >
								{{scope.row.name}}
							</div>
						</template>
					</el-table-column>

					<el-table-column fixed="right" label="操作" min-width="170">
						<template slot-scope="scope">
							<span class="edit-text" @click="editShow(scope.row.id)">编辑 </span>
							<a :href="memberUrl+'?id='+scope.row.id">
								<span class="edit-text">队员管理 </span>
							</a>
							<span class="del-text" @click="organizationOpt('del',scope.row.id)">删除</span>
						</template>
					</el-table-column>

				</el-table>
			</div>
			<div class="page-container display-flex">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
					layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
				</el-pagination>
			</div>
		</div>
		<!-- END MAIN CONTENT -->
	<!-- 多选采购商弹框 -->
	<el-dialog
	title="编辑"
	:visible.sync="buyersDialog"
	width="30%">
		<div >
			<span>团队</span>
			<el-input v-model="name" placeholder="请输入内容">
			</el-input>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="buyersDialog = false">取 消</el-button>
			<el-button type="primary" @click="organizationOpt('add')" >确 定</el-button>
		</span>
	</el-dialog>
	<el-dialog
	title="编辑"
	:visible.sync="editDialog"
	width="30%">
		<div >
			<span>团队</span>
			<el-input v-model="name" placeholder="请输入内容">
			</el-input>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="editDialog = false">取 消</el-button>
			<el-button type="primary" @click="organizationOpt('edit',editId)" >确 定</el-button>
		</span>
	</el-dialog>
	</div>

	<!-- END MAIN -->
	<div class="clearfix"></div>
	<!-- FOOTER -->
	{%include file="public/footer" /%}
	<!-- END FOOTER -->


	<!-- Javascript -->
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<script src="__STATIC__/assets/vendor/bootstrap/js/bootstrap.min.js"></script>

	<script src="__STATIC__/assets/vendor/jquery.form.js"></script>
	<script src="__STATIC__/assets/vendor/layer-v3.1.1/layer/layer.js"></script>

	<!-- vue -->
	<script src="__ROOT__/assets/addons/shopro/libs/vue.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/element/element.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/Sortable.min.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/vuedraggable.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/moment.js"></script>
	<script type="text/javascript">
		// 成员页面路径
		let memberUrl = "{%:url('organization/member')%}";
		var organizationLists = new Vue({
                el: "#organization-lists",
                data() {
                    return {
                        name:'',
						buyersDialog:false,
						organizationData:[],//组织
						currentPage:1,//当前页
						totalPage:0,
						limit:10,
						editId:0,
						editDialog:false,
						memberUrl:memberUrl
                        
                    }
                },
                created() {
					this.getOrganization();
                },
                methods: {
					editShow(id){
						this.editId = id;
						this.editDialog = true;
					},
					// 编辑团队
					organizationOpt(type,id){
						console.log({type,id});
						let that = this;
						switch(type){
							case 'edit':
								$.post("{%:url('organization/edit')%}",{
								name:that.name,
								id
								},function(rsp){
									if(rsp.code==1){
										that.editDialog = false;
										that.$message.success(rsp.msg);
										that.getOrganization();
									}else{
										that.$message.error(rsp.msg);
									}
									
								},'json')
								break;
							case 'del':
								$.post("{%:url('organization/del')%}",{
								id:id
								},function(rsp){
									var icon = 6;
									if (rsp.code==0) {
										icon = 5;
									}else if(rsp.code==1){
										that.getOrganization();
									}
									layer.alert(rsp.msg,{icon: icon},function(index){
										layer.close(index);
									});
								},'json')
								break;
							case 'add':
								$.post("{%:url('organization/addName')%}",{
								name:that.name
								},function(rsp){
									if(rsp.code==1){
										that.buyersDialog = false;
										that.$message.success(rsp.msg);
										that.getOrganization();
									}else{
										that.$message.error(rsp.msg);
									}
									
								},'json')
								break;
						}
					},
					handleSizeChange(val){
						this.limit = val;
						this.getOrganization();
						console.log({val});
					},
					// 切换分页
					handleCurrentChange(val){
						this.currentPage = val;
						this.getOrganization();
					},
					// 获取团队列表
					getOrganization(){
							let that = this;
							$.post("{%:url('organization/getlist')%}",{
							page:that.currentPage,
							page_size:that.limit
							},function(rsp){
								var icon = 6;
								if (rsp.code==0) {
									icon = 5;
								}
								if(rsp.code == 1){
									that.organizationData = rsp.data.data;
									that.currentPage = rsp.data.current_page;
									that.totalPage = rsp.data.total;
								}
								
							},'json')
						
					}
					
				},
				watch: {
                   
                }
    	})
		
	</script>
</body>

</html>